<template>
    <div>
        <div class="m-main">
            <div class="m-img">
                <img src="../../../static/images/financial organizations.png" alt="">
            </div>
            <div class="container-model">
                <div class="container container_bg">
                    <div class="con-title">
                        金融机构
                        <p>Financial Institution</p>
                    </div>
                    <div class="con-items">
                        <div class="item-box">
                            <div class="box-tab">
                                <div class="tab-left">
                                    <div class="left-tab" :class="{'on':tab===0}" @click="click_tab(0)">银行</div>
                                    <div class="left-tab" :class="{'on':tab===1}" @click="click_tab(1)">租赁</div>
                                    <div class="left-tab" :class="{'on':tab===2}" @click="click_tab(2)">担保</div>
                                    <div class="left-tab" :class="{'on':tab===3}" @click="click_tab(3)">其他</div>
                                </div>
                                <div class="tab-right">
                                    <span><img src="../../../static/images/jrlj_tel.png" alt=""></span>
                                    金融机构联系方式
                                </div>
                            </div>
                            <div class="box-bands">
                                <ul>
                                    <li><img src="../../../static/images/jry_xyyh.png" alt=""></li>
                                    <li><img src="../../../static/images/jry_zsyh.png" alt=""></li>
                                    <li><img src="../../../static/images/jry_pfyh.png" alt=""></li>
                                    <li><img src="../../../static/images/jry_xmyh.png" alt=""></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "FinancialInstitutions",
        data(){
            return{
                tab:0,
            }
        },
        methods:{
            click_tab(tab){
                this.tab=tab;
            }
        }
    }
</script>

<style lang="less" scoped>
.m-main{
    font-family:MicrosoftYaHei;
    font-weight:400;
    color: #333;
    .m-img{
      width: 100%;
      img{
        width: 100%;
      }
    }
    .container-model{
        .container_bg{
            background: url(../../../static/images/bg47.png) no-repeat;
            background-size: cover;
            padding: 58px 0 79px;
        }
        padding: 60px 0;
        .con-title{
            text-align: center;
            font-size: 24px;
            &>p{
                font-size: 12px;
            }
        }
        .con-title{
            color: #1575F9;
            &>p{
                font-size: 12px;
                color: #1575F9;
            }
        }
        .con-items{
            height: 366px;
            background:rgba(0,101,195,0.71);
            
            margin-top: 70px;
            .item-box{
                padding: 20px 20px 0;
                .box-tab{
                    height: 50px;
                    line-height: 50px;
                    border-bottom: 2px solid #fff;
                    color: #fff;
                    .tab-left{
                        display: inline-block;
                        padding-left: 15px;
                        .left-tab{
                            display: inline-block;
                            margin-right: 20px;
                            font-size: 20px;
                            &.on{
                                font-size: 24px;
                                font-weight: bold;
                            }
                        }
                    }
                    .tab-right{
                        float: right;
                        font-size: 18px;
                        &>span{
                            margin-right: 5px;
                        }
                    }
                }
                .box-bands{
                    margin-top: 67px;
                    &>ul{
                        display: flex;
                        li{
                            display: inline-block;
                            flex: 1;
                            margin-right: 10px;
                            &:last-child{
                                margin-right: 0;
                            }
                            img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>

